﻿
@{
    ViewData["Title"] = "ShowPayment";
    Layout = null;
}

<!DOCTYPE html>
<head>
    <link href="~/BootstrapS/css/bootstrap.min14ed.css" rel="stylesheet" />
    <link href="~/BootstrapS/css/font-awesome.min93e3.css" rel="stylesheet" />
    <link href="~/BootstrapS/css/animate.min.css" rel="stylesheet" />
    <link href="~/BootstrapS/css/style.min862f.css" rel="stylesheet" />

    <script src="~/vue/axios.min.js"></script>
    <script src="~/vue/vue.min.js"></script>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight" id="tab">
        <div class="row">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <input type="search" class="form-control input-sm" aria-controls="DataTables_Table_0" style="width:240px;height:35px;float:left" placeholder="请输入病人编号" v-model="queryModel.name"> <button type="button" style="margin-left:30px" class="btn btn-outline btn-info" v-on:click="queryUser">查询</button>
                    <button type="button" class="btn btn-outline btn-info" style="float:right" href="/Payment/AddPayment" data-toggle="modal" data-target="#myModal">支付费用</button>
                </div>
                <div class="ibox-content">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>病人名称</th>
                                <th>医生名称</th>
                                <th>挂号科室</th>
                                <th>总计金额</th>
                                <th>优惠折扣</th>
                                <th>实付费用</th>
                                <th>当前状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item,index) in emps">
                                <td>{{index+1}}</td>
                                <td>{{item.patient_Name}}</td>
                                <td>{{item.doctor_Name}}</td>
                                <td>{{item.outpatient_Name}}</td>
                                <td>{{item.payment_Sum}}</td>
                                <td>{{item.discount_Rate}}</td>
                                <td>{{item.payment_Actual}}</td>
                                <td>{{item.patient_State==1?"待就诊":item.patient_State==2?"就诊中":item.patient_State==3?"已完成":"取消"}}</td>
                                <td><button type="button" v-if="item.patient_State===3"  class="btn btn-outline btn-warning" href="/Payment/FaPiao" data-toggle="modal" data-target="#faPiao">发票</button>
                                    <button type="button" v-if="item.patient_State!=3" disabled class="btn btn-default btn-sm" style="width:55px" href="/Payment/FaPiao" data-toggle="modal" data-target="#faPiao">发票</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- 模态框（Modal） -->
    <div class="modal fade animated flipInY" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="width: 600px; margin-left: 70px; margin-top: 120px">
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- 模态框（Modal） -->
    <div class="modal fade animated flipInY" id="faPiao" tabindex="-1" role="dialog" aria-labelledby="faPiaoLable" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-header" style="margin-left:1000px;margin-top:50px">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="font-size:30px;color:red">&times;</button>
            </div>
            <div class="modal-content" style="width:1200px;height:800px;margin-left:-250px;margin-top:-50px">
                <div class="modal-footer">

                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>


    <script src="~/BootstrapS/js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="~/BootstrapS/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="~/BootstrapS/js/plugins/layer/layer.min.js"></script>
    <script src="~/BootstrapS/js/hplus.min.js"></script>
    <script src="~/BootstrapS/js/contabs.min.js"></script>
    <script src="~/BootstrapS/js/plugins/pace/pace.min.js"></script>

    <script src="~/BootstrapS/js/jquery.min.js"></script>
    <script src="~/BootstrapS/js/bootstrap.min.js"></script>
</body>
<script>
    new Vue({
        el: '#tab',
        data: {
            emps: '',
            queryModel: {
                name: "",
            }
        },
        mounted() {
            axios
                .get('/Payment/GetPayment')
                .then(response => (this.emps = response.data))
                .catch(function (error) { // 请求失败处理
                    console.log(error);
                });
        },
        methods: {
            queryUser: function () {
                axios
                    .get('/Payment/GetPayment', {
                        params: { name: this.queryModel.name }
                    })
                    .then(response => (this.emps = response.data))
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            }
        }
    })

</script>
